<template>
  <view class="car-selector-page">
    <!-- 品牌选择 -->
    <CarSelector 
      v-if="currentStep === 'brand'"
      type="brand"
      @select-brand="handleSelectBrand"
      @back="handleBack"
      @clear="handleClear"
    />
    
    <!-- 车型选择 -->
    <CarSelector 
      v-if="currentStep === 'series'"
      type="series"
      :brand-id="selectedBrand.id"
      @select-series="handleSelectSeries"
      @back="handleBackToBrand"
      @clear="handleClear"
    />
  </view>
</template>

<script>
import CarSelector from '@/components/CarSelector.vue'

export default {
  name: 'CarSelectorPage',
  components: {
    CarSelector
  },
  data() {
    return {
      currentStep: 'brand', // brand-选择品牌, series-选择车型
      selectedBrand: null, // 选中的品牌
      selectedSeries: null // 选中的车型
    }
  },
  onLoad(options) {
    // 如果有传入品牌ID，直接进入车型选择
    if (options.brandId) {
      this.selectedBrand = {
        id: options.brandId,
        name: options.brandName || '未知品牌'
      }
      this.currentStep = 'series'
    }
  },
  methods: {
    // 选择品牌
    handleSelectBrand(brand) {
      console.log('选择的品牌:', brand)
      this.selectedBrand = brand
      this.currentStep = 'series'
    },
    
    // 选择车型
    handleSelectSeries(series) {
      console.log('选择的车型:', series)
      this.selectedSeries = series
      // return
      // 返回上一页并传递选择结果
      const pages = getCurrentPages()
      const prevPage = pages[pages.length - 2]
      
      if (prevPage) {
        // 调用上一页的方法
        prevPage.$vm.handleCarSelected({
          brand: this.selectedBrand,
          series: series
        })
      }
      
      // 返回上一页
      uni.navigateBack()
    },
    
    // 返回
    handleBack() {
      uni.navigateBack()
    },
    
    // 返回品牌选择
    handleBackToBrand() {
      this.currentStep = 'brand'
      this.selectedBrand = null
    },
    
    // 清除选择
    handleClear() {
      if (this.currentStep === 'brand') {
        this.selectedBrand = null
      } else {
        this.selectedSeries = null
      }
    }
  }
}
</script>

<style scoped>
.car-selector-page {
  height: 100vh;
  background-color: #fff;
}
</style> 